<template>
	<view class="shadow">
		<view class="u-flex u-padding-left-30 u-flex-center u-padding-right-30 u-padding-top-20">
			 
			<view class="u-padding-top-10">
				<u-image :custom-style="customStyle" v-if="coupon.redpack_type==1" src="@/static/icon/quan-coupon.png" width="64" height="52" ></u-image>
				<u-image :custom-style="customStyle" v-else  src="@/static/icon/quan-duihuan.png" width="64"  height="52"></u-image>
			</view>  
		 
			<view class="u-flex-grow u-margin-left-20">
				<view class="">
					<text class="font-size14 font-weight"> {{coupon.title}}</text>
				</view>
				<view class="">
					<text class="font-size12 color-gray">  {{coupon.subtitle}}</text>
				</view>
				<view class="">
					<text class="font-size12 color-gray"> {{coupon.start_date}}至{{coupon.end_date}}</text>
				</view>
				
			</view>
		</view>
		 <view class="divider">  <view class="border"> </view> </view>
		 <view class="u-padding-left-30  u-padding-right-30 u-padding-bottom-20">
		 	<view class="u-flex align-center color-gray u-flex-between">						 
				<view class="u-flex font-size12" @tap="triggle">
					<text>{{coupon.tag}}</text>
					<text class=" u-margin-left-20">使用说明</text>
					<u-icon name="arrow-right" size="12"></u-icon>
				</view>
				<view v-if="coupon.redpack_type==2 && coupon.is_used==0" class="">
					<navigator :url="'/pages/user/redpack/touse?id='+coupon.agent_sn">
						<u-button text="去使用" type="primary" size="small" shape="circle" :plain="true"></u-button>
					</navigator>
				</view>
				<view v-else>
					<text class="color-red font-size12">{{coupon.status_label}}</text>
				</view>
		 	</view>
		 </view>
		<view v-show="showInfo" class="u-content u-padding-25 font-size12 color-gray">
			<up-parse :tag-style="{ p: 'padding-bottom:30rpx; ' }" :content="coupon.describe"></up-parse>
		</view>
	</view>
</template>

<script setup>
	import {ref,computed} from "vue";
	const props  = defineProps(['coupon']);
	const showInfo = ref(false);
	 
	const customStyle = computed(()=> {
		if(props.coupon.can_used==0){
			return {filter: 'grayscale(90%)'};
		}
	})
	
	function triggle(){
		showInfo.value = !showInfo.value;
	}
</script>

<style>
</style>